import React, { Component } from 'react'
import { rollingImg, goodsCategory, goodsList, addCart, whetherFavor, addFavor, getUsermsg } from '@api'
import MyTabbar from '../../components/MyTabbar'
import HomeHead from './HomeHead'
import MySwiper from './MySwiper'
import HomeCates from './HomeCates'
import MySwiper2 from './MySwiper2'
import HomeGuessLike from './HomeGuessLike'
import HomeGoodList from './HomeGoodList'
import { PullToRefresh, Toast } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
import { getToken } from '@utils/index.js'
import { store } from '../../store/index'
import './index.scss'



export default class Home extends Component {

  state = {
    allunm: 0,
    rollImg: [],
    cates: [],
    guessList: [],
    page: 1,
    pageSize: 6,
    goodsList: [],
    hasMore: true,
    userinfoimg: ''
  }
  render() {
    return (
      <div className='section_home'>
        {/* 头部伪搜索 */}
        <HomeHead goSearch={this.goSearch} goUser={this.goUser} headImg={this.state.userinfoimg} />
        <PullToRefresh onRefresh={this.onRefresh}>
          <div className='sh_container'>
            {/* 大轮播图 */}
            <MySwiper rollImg={this.state.rollImg} />
            {/* 商品分类 */}
            <HomeCates cates={this.state.cates} goMoreCates={this.goMoreCates} goItemlist={this.goItemlist} />
            {/* 小轮播图 */}
            <MySwiper2 />
            {/* 猜你喜欢 */}
            <HomeGuessLike guessList={this.state.guessList} goDetail={this.goDetailpage} />
            {/* 商品列表 */}
            <HomeGoodList goodsList={this.state.goodsList} goDetail={this.goDetailpage} addCart={this.addCart} addFavor={this.addFavor} hasMore={this.state.hasMore} loadMore={this.loadMore} />
          </div>
        </PullToRefresh>
        {/* 页脚tabbar */}
        <MyTabbar pathname={this.props.location.pathname} />
      </div>
    )
  };
  componentDidMount() {
    this.rollingImg()
    this.goodsCategory()
    this.guessList()
    this.getUsermsg()
    // let alltabnum = Number(JSON.parse(localStorage.getItem('persist:root'))['preState'])
    // store.dispatch({ type: 'allnumber', data: alltabnum })
  }
  componentWillUnmount() {
    this.setState = () => false;
  }
  // 点击tabbar切换页面
  goTabbarPage = (value) => {
    this.props.history.push(value)
  }
  // 点击头部去搜索页
  goSearch = (value) => {
    this.props.history.push(value)
  }
  // 点击头部去我的页
  goUser = (value) => {
    this.props.history.push(value)
  }
  // 轮播图
  rollingImg = () => {
    rollingImg().then((res) => {
      if (res.data.code === 0) {
        this.setState({
          rollImg: res.data.data
        })
      }
    })
  }
  // 商品分类
  goodsCategory = () => {
    goodsCategory().then((res) => {
      if (res.data.code === 0) {
        this.setState({
          cates: res.data.data
        })
      }
    })
  }
  // 点击查看更多分类
  goMoreCates = (value) => {
    this.props.history.push(value)
  }
  // 获取用户信息渲染头像
  getUsermsg = () => {
    getUsermsg({
      token: getToken()
    }).then((res) => {
      if (res.data.code === 0) {
        this.setState({
          userinfoimg: res.data.data.base.avatarUrl
        })
      }
    })
  }
  // 猜你喜欢列表
  guessList = () => {
    goodsList({
      categoryId: '74079,72400',
      orderBy: 'priceUp'
    }).then((res) => {
      if (res.data.code === 0) {
        this.setState({
          guessList: res.data.data.result
        })
      }
    })
  }
  // 商品列表
  goodsList = () => {
    goodsList({
      page: this.state.page,
      pageSize: this.state.pageSize
    }).then((res) => {
      if (res.data.code === 0) {
        this.setState({
          goodsList: [...this.state.goodsList].concat([...res.data.data.result])
        })
      }
      if (res.data.code === 700) {
        this.setState({
          hasMore: false
        })
      }
    })
  }
  // 去详情页
  goDetailpage = (value) => {
    this.props.history.push({ pathname: `/detail/${value}` })
  }
  // 分类商品页
  goItemlist = (value) => {
    this.props.history.push({ pathname: `/itemlist/${value}` })
  }
  // 滚动加载更多
  loadMore = async () => {
    this.goodsList()
    await sleep(2000)
    this.setState({ page: this.state.page + 1 })
  }
  // 下拉刷新
  onRefresh = async () => {
    await sleep(1000)
    this.setState({
      page: 1,
      goodsList: [],
      hasMore: true
    })
  }
  // 加入购物车
  addCart = (value) => {
    addCart({
      number: 1,
      goodsId: value,
      token: getToken()
    }).then((res) => {
      console.log(res)
      if (res.data.code === 0) {
        Toast.show({
          icon: 'success',
          content: '加购成功',
        })
        this.setState(() => {
          store.dispatch({ type: 'allnumber', data: res.data.data.number })
          return {
            allunm: res.data.data.number,
          }
        })
      }
    })
  }
  // 加入收藏
  addFavor = (value) => {
    whetherFavor({
      goodsId: value,
      type: 0,
      token: getToken()
    }).then((res) => {
      if (res.data.code === -1) {
        addFavor({
          goodsId: value,
          type: 0,
          token: getToken()
        }).then((res) => {
          Toast.show({
            icon: 'success',
            content: '收藏成功'
          })
        })
      } else if (res.data.code === 0) {
        Toast.show({
          icon: 'fail',
          content: '请勿重复收藏'
        })
      }
    })
  }
}
